import { Menu } from 'antd'
import {
    BankOutlined,
    FileTextOutlined,
    SendOutlined,
    PropertySafetyOutlined
} from '@ant-design/icons';
import { useIntl } from 'react-intl';
import { messages } from '../language/intl';
const Icons = {
    BankOutlined,
    FileTextOutlined,
    SendOutlined,
    PropertySafetyOutlined
}

const LeftMenu = () => {
    const menuStore = JSON.parse(localStorage.getItem("menu") || "[]");
    const intl = useIntl();
    const getIntlMessage = (id: string) => intl.formatMessage(messages[id]);
    // 获取icon
    const getIcons = (str: string, Icons: any) => {
        const TestIcon = Icons[str];
        return <TestIcon />;
    };
    // 渲染左侧菜单
const sideBarTree = (menuArr: any[], getIntl: Function) => {
  if(menuArr && menuArr.length) {
    return menuArr.map((item, index) => {
      return (
        item.children 
        ? 
        <Menu.SubMenu className="home-menu" popupClassName="home-sider" key={ item.path } icon={ item.icon ? getIcons(item.icon, Icons) : '' } title={ getIntl(item.breadcrumbName) }>
          { sideBarTree(item.children, getIntl) }
        </Menu.SubMenu> : <Menu.Item className="home-menu-item" icon={ item.icon ? getIcons(item.icon, Icons) : '' } key={ item.path }>{ getIntl(item.breadcrumbName) }</Menu.Item>
      )
    })
  } else {
    return null
  }
}

    return (
        <Menu mode="inline" defaultSelectedKeys={['mail']} theme='dark' >
            {sideBarTree(menuStore, getIntlMessage)}
        </Menu>
    );
};

export default LeftMenu;